<template>
	<view>
		<!-- 		<view class="pay-mode">
			<view class="pay-title">
				<text>我的团购券</text>
			</view>

			
		</view> -->
		<view class="coupon-popup"
			style="display: flex;justify-content: space-between;background-color: #fff;padding: 20rpx 40rpx;align-items: center;margin-bottom: 20rpx;">
			<view class="title" style="padding: 0;">
				<view>手机号码</view>
				<view style="font-size: 22rpx;color: #999;">
					仅用于出票使用
				</view>
			</view>
			<view>
				{{userPhone}}
			</view>
		</view>
		<view class="coupon-popup">
			<view class="title">我的团购券</view>
			<view class="no-data" style="text-align: center;" v-if="couponList.length==0">
				暂无可用团购券
			</view>
			<view class="coupon-list">
				<view class="list-item" v-for="(item,index) in couponList" :key="index">
					<view style="margin-left: 40rpx;">
						<view>{{item.skuInfo.title}}</view>
						<view>有效期至:{{getDate(item.expireTime)}}</view>
					</view>

					<view class="use-btn" @click="comfirmCoupon(item)">
						立即使用
					</view>

					<view class="cricle-top"></view>
					<view class="cricle-bottom">

					</view>
					<view class="line">

					</view>
				</view>
			</view>
		</view>


		<!-- showCoupon -->
		<u-popup :show="showCoupon" round closeOnClickOverlay closeable @touchmove.stop.prevent="moveStop"
			@close="showCoupon = false">

		</u-popup>
		<!-- <couponTip :showCouponTips='showCouponTips' :hallCode='hallCode'></couponTip> -->
		<!-- 		<view class="pay">
			<view class="">
				<u-button shape="circle" @click='pay'
					color="linear-gradient(to right, #99d6ff, #008ae6)" size="large">立即支付
				</u-button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getMemberPrice,
		payByMemberCard,
		releaseSeat,
		payByCoupons,
		goodsList,
		douyinPayApi,
		getDouyinCoupon
	} from '../../common/http/api.js'
	import {
		checkPhone
	} from '../../common/formCheck.js'

	import couponTip from '../common/couponTip.vue'
	import moment from 'moment';
	import {
		BASE_CINEMA_CODE,
		baseUrl
	} from '@/common/http/http.js'
	export default {
		props: ["channelOrderCode", "orderCode", "isRelease", 'enterNum'],
		components: {
			couponTip
		},
		data() {
			return {
				orderData: {},
				wxPayMoney: '',
				balance: "",
				cardPayMoney: '',
				cardServiceFee: 0,
				couponList: [],
				giveCouponList: [],
				isWxPay: true,
				cardText: '请选择会员卡',
				showCard: false,
				showCoupon: false,
				showGiveCoupon: false,
				showPassword: false,
				showCouponTips: false,
				hallCode: '',
				payMode: 'wx',
				releaseSeatParams: {
					Count: '',
					OrderCode: '',
					SessionCode: '',
					Seat: []
				},
				isPay: false,
				selectedCoupons: [],
				skuInfo: {},
				canCardPay: true,
				screenCode: '',
				channelFee: 0,
				isCouponTy: false,
				showDouyin: false,
				dyCouponIndex: -1,
				userPhone: ''
			};
		},
		methods: {
			moveStop() {},

			getDyCouponList() {
				getDouyinCoupon({
					openId: uni.getStorageSync("openId")
				}).then(res => {
					this.couponList = res.data
				})
			},
			pay() {
				this.couponPay()
			},
			goodsModal() {
				goodsList().then(res => {
					if (res.data.length) {
						uni.showModal({
							title: "支付成功",
							content: "是否前往购买商品",
							confirmText: "是",
							cancelText: "否",
							success: res => {
								if (res.confirm) {
									uni.switchTab({
										url: '../../pages/goods/goods'
									})
								} else {
									setTimeout(() => {
										uni.redirectTo({
											url: '../../pages/orderPage/orderPage?orderCode=' +
												this.orderCode + '&statusText=待取票'
										})
									}, 1500)
								}
							}
						})
					} else {
						console.log('orderCode:' + this.orderCode);
						uni.redirectTo({
							url: '../../pages/orderPage/orderPage?orderCode=' +
								this.orderCode + '&statusText=待取票'
						})
					}
				})
			},


			selectDyCoupon(couponItem, index) {
				uni.showModal({
					title: "温馨提示",
					content: "本影票一经兑换，不支持改签、退票，感谢您的理解与支持！”",
					confirmText: "确认",
					cancelText: "取消",
					confirmColor: '#008ae6',
					success: res => {
						if (res.confirm) {
							this.skuInfo = couponItem.skuInfo
							this.dyCouponIndex = index
							console.log(this.dyCouponIndex);
							if (this.selectedCoupons.indexOf(couponItem.certificateId) == -1) {
								if (this.releaseSeatParams.Count == this.selectedCoupons.length) return
								this.selectedCoupons.push(couponItem.certificateId)
							} else {
								const index = this.selectedCoupons.indexOf(couponItem.couponCheckCode)
								this.selectedCoupons.splice(index, 1)
							}
						} else {
							this.showCoupon = false
						}
					}
				})



			},
			comfirmCoupon(couponItem) {
				console.log(couponItem);
				uni.showModal({
					title: "温馨提示",
					content: "本影票一经兑换，不支持改签、退票，感谢您的理解与支持！",
					confirmText: "确认",
					cancelText: "取消",
					confirmColor: '#008ae6',
					success: res => {
						console.log(res);
						if (res.confirm) {
							this.createOrder(couponItem)
						}
					}
				})
			},
			couponPay() {
				// if (this.selectedCoupons.length < this.$store.state.sessionSeatList.length) {
				// 	uni.showToast({
				// 		title: "优惠券不足",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if (this.couponList.length == 0) {
					uni.showToast({
						title: "暂无优惠券",
						icon: "none"
					})
					return
				}
				if (this.dyCouponIndex == -1) {
					uni.showToast({
						title: "请选择优惠券",
						icon: "none"
					})
					this.showCoupon = true
					return
				}
				this.createOrder()
			},
			toBind() {
				// releaseSeat(this.releaseSeatParams)
				uni.navigateTo({
					url: '/pages/bindCard/bindCard'
				})
			},

			randomString10() {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < 10; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			},
			createOrder(couponItem) {

				tt.createOrder({
					skuList: [{
						skuId: couponItem.skuInfo.sku_id, // sku 商品Id 必传
						skuType: 2, // sku 商品类型 必传
						quantity: 1, // 数量 必传
						price: couponItem.amount.original_amount, // 价格 非商品库 sku 商品必传
						discountAmount: couponItem.amount.original_amount, // 核销工具必传，抵扣券商品需要传入折扣金额
						goodsInfo: {
							goodsName: couponItem.skuInfo.title, // 商品名称 必填
							goodsPhoto: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ibaotu.com%2Fgif%2F19%2F48%2F47%2F76Z888piCd6W.gif%21fwpaa50%2Ffw%2F700&refer=http%3A%2F%2Fpic.ibaotu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644654365&t=5fc9b5fdad0a16264a9a9c09c14b3af9', // 商品图片链接 必填
							goodsId: couponItem.skuInfo.sku_id, // 商品ID 必填
							goodsType: 2, // 商品类型 必填
						},
						discountInfo: { // 主单券sku必传，必须有主单券sku
							type: 1, // 核销工具 type 必传1 
							detail: {
								deductInfo: { // 必传
									discountCode: [couponItem.certificateId],
									poiId: couponItem.poiId, // 必传，核销门店
									orderId: couponItem.orderId //必传 订单号 '1083826299418260327'
								}
							}
						}
					}],
					payment: {
						totalAmount: couponItem.amount.original_amount, // 订单总价 必填 10*1=10
						totalDiscountAmount: couponItem.amount.original_amount, // 总抵扣价
					},
					callbackUrl: `${baseUrl}/pay/v1/douyin/prePayNotify`,
					callbackData: {

						cinemaCode: BASE_CINEMA_CODE,
						orderCode: this.orderCode,
						filmCode: this.$store.state.sessionInfo.filmCode,
						hallCode: this.screenCode,
						skuId: couponItem.skuInfo.sku_id,
						orderPhone: this.userPhone,
							OrderPhone: this.userPhone
					},
					success: res => {
						const {
							orderId,
							outOrderNo
						} = res;
						console.log('success res', res);
						console.log('orderId', orderId, 'outOrderNo', outOrderNo);
						tt.verifyCertificates({
							verifyToken: this.randomString10(),
							poiId: couponItem.poiId, // 核销门店Id 必传
							orderList: [ // 订单信息 必传
								{

									orderId: couponItem.orderId, // 核销的券所属订单Id 必传
									certificateList: [couponItem.certificateId]
								}
							],
							orderEntrySchema: { // 订单详情页链接 必传  
								path: 'pages/orderPage/orderPage',
								params: `{\"id\":${this.orderCode}}`,
							},
							success: res => {
								const {
									orderVerifyResults
								} = res;
								this.isPay = true
								uni.showToast({
									title: "购票成功",
									icon: "none"
								})

								setTimeout(() => {
									uni.reLaunch({
										url: '../../pages/orderPage/orderPage?orderCode=' +
											this.orderCode + '&statusText=待取票'
									})
								}, 1500)
							},
							fail: e => {
								console.log(e);
								uni.showModal({
									title: "系统异常",
									content: '支付出现问题，请您联系商家客服，我们将竭诚为您解决'
								})
							}
						});


					},
					fail: res => {
						const {
							orderId,
							outOrderNo,
							errNo,
							errMsg,
							errLogId
						} = res;

						console.log(errMsg)
						const content = errMsg.replace('createOrder:fail 开发者拒绝交易: ', '')

						console.log();
						uni.showModal({
							title: "下单失败",
							content: errMsg == content ? '无法兑换，请检查商品类型或联系客服热线' : content
						})
					},
				});

			}
		},
		created() {
			this.screenCode = this.$store.state.sessionInfo.ScreenCode;
			this.channelFee = parseFloat((this.$store.state.sessionInfo.channelFee * this.$store.state.sessionSeatList
				.length).toFixed(
				2))
			this.releaseSeatParams.Count = this.$store.state.sessionSeatList.length
			this.releaseSeatParams.SessionCode = this.$store.state.sessionInfo.PlanCode
			this.releaseSeatParams.Seat = this.$store.state.seatsCode
			this.userPhone = uni.getStorageSync('userPhone')

			// this.queryCoupon()
			this.getDyCouponList()
		},
		watch: {
			isRelease(n) {
				if (n && !this.isPay) {
					releaseSeat(this.releaseSeatParams)
				}
			},
		},
		computed: {
			getScreenName() {
				return codes => {
					const {
						screens
					} = this.$store.state

					if (codes) {
						const list = codes.split(',')
						const strArr = []
						// const index = screens.find(item => item.ScreenCode === code)
						list.map(item => {
							screens.map(screen => {
								if (screen.ScreenCode == item) strArr.push(screen.ScreenName)
							})
						})
						return strArr.join('、')
					} else {
						return ''
					}
				}
			},
			checkCouponDate() {
				return (start, end) => {
					return moment().isBetween(start, end)
				}
			},
			getDate() {
				return (time) => {
					console.log(time);
					return moment.unix(time).format('YYYY-MM-DD')
				}
			}

		},
		// beforeDestroy() {
		// 	if (!this.isPay) {
		// 		console.log('进入解锁');
		// 		this.releaseSeatParams.OrderCode = this.orderCode
		// 		releaseSeat(this.releaseSeatParams)
		// 	}
		// }
	}
</script>

<style lang="scss">
	::v-deep .van-checkbox {
		margin-top: 15rpx !important;
	}

	.custom-class {
		margin-top: 15rpx !important;
	}

	.input-password {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80vw;
		height: 200rpx;
		padding: 30rpx;
	}

	.phone {
		display: flex;
		padding: 20rpx 4vw;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 15rpx;
		font-size: 26rpx;

		input {
			width: 180rpx;
		}
	}

	.pay-mode {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		margin-top: 15rpx;

		.pay-title {
			font-size: 26rpx;
			width: 92vw;
			border-bottom: 1px solid #f0f0f5;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
		}

		.mode-item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			padding: 15rpx 0;
			width: 92vw;

			.mode-left {
				display: flex;
				align-items: center;


				.left-text {
					display: flex;
					flex-direction: column;
					font-size: 32rpx;
					margin-left: 20rpx;

					text:last-child {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.select-icon {
				height: 100%;
				display: flex;
				align-items: center;
			}
		}
	}

	.select-card-list {
		width: 100vw;
		height: 10vh;
		padding-top: 15rpx;

		.select-card {
			display: flex;
			background-color: #fff;
			width: 90vw;
			margin: 0rpx auto 10rpx auto;
			box-shadow: 4px 4px 4px #f0f0f5;
			justify-content: space-between;
			color: #999;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
		}

	}

	.pay {
		position: fixed;
		bottom: 0;
		width: 92vw;
		padding: 15rpx 4vw 30rpx 4vw;
		background-color: #fff;

		.pay-money {
			font-size: 28rpx;
			display: flex;
			align-items: flex-end;

			text {
				line-height: 70rpx;
			}

			.total-price {
				font-size: 32rpx;
				color: #cc4444;
				font-weight: bold;
			}

			.server-fee {
				margin-left: 5rpx;
				font-size: 22rpx;
				color: #cc4444;
			}
		}
	}

	.coupon-popup {
		// padding: 30rpx 50rpx;
		font-size: 28rpx;
		color: #999;



		.title {
			// text-align: center;
			color: #333;
			margin-bottom: 10rpx;
			background-color: #fff;
			padding: 20rpx 40rpx;
		}

		// .coupon-item {
		// 	margin-top: 30rpx;

		// 	.date {
		// 		margin-left: 20rpx;
		// 	}
		// }
		.coupon-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			// flex-wrap: wrap;
			// justify-content: space-between;

			.list-item {
				display: flex;
				// flex-direction: column;
				background-color: #fff;
				align-items: center;
				justify-content: space-between;
				color: #999;
				width: 95%;
				height: 160rpx;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 5rpx 20rpx;
				box-sizing: border-box;
				position: relative;


				.cricle-top {
					background-color: #f0f0f5;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 160rpx;
					top: -20rpx;
				}

				.cricle-bottom {
					background-color: #f0f0f5;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 160rpx;
					bottom: -20rpx;
				}

				.line {
					border-right: 2px #f0f0f5 dashed;
					height: 160rpx;
					position: absolute;
					right: 179rpx;
					top: 0;
				}

				.use-btn {
					width: 120rpx;
					line-height: 30rpx;
					background-color: #008ae6;
					color: #fff;
					border-radius: 10rpx;
					font-size: 24rpx;
					text-align: center;
					padding: 10rpx;
				}



			}



		}

	}
</style>